<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1">
		<!-- 商品分类导航 -->
		<div class="col-md-12 bg-danger">
			<div class="navbar-header">
				<ul class="nav nav-tabs ">
					<li><a href='javascript:void(0)' class='gtnav' gtid='0'><strong>所有商品</strong></a></li>
				</ul>
			</div>
			<div class="navbar-body">
				<ul class="nav nav-tabs " id="goodsTypeList">
				</ul>
			</div>
		</div>

		<div class="col-md-12 bg-warning text-left"
			style="margin-bottom: 10px">
			<h3 id="goodsTypeName">所有商品</h3>
		</div>
		<div style="height: 630px;">
			<div class="col-md-12 bg-warning text-center" id="goodsView"></div>
			<div class="col-md-12 bg-success text-center" id="pageNav"></div>
			<div class='col-md-12 bg-warning' style="height: 50px;"></div>
		</div>
	</div>
	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<script type="text/html" id="goodsTypeNav">
{{each goodsTypes goodsType}}
	<li><a href='javascript:void(0)' class='gtnav' gtid='{{goodsType.gtid}}'>{{goodsType.gtname}}</a></li >
{{/each}}
</script>
<script type="text/html" id="goodsViewDiv">
{{each goodses goods}}
<div class='col-md-3' style="height: 350px; margin-top:5px ; margin-bottom:5px">
	<a href="goods?opr=initGoodsInfo&gid={{goods.gid}}">
	<div class="col-md-12 bg-info">
		<img style="height: 250px" src ="{{goods.gpic}}" >
	</div>
	<div class="col-md-12 bg-danger">
		<div style="height: 20px" >￥{{goods.gprice}}</div>
		<div style="height: 40px" >{{goods.gname}}</div>
	</div>
	</a>
	<div class="col-md-12 bg-danger" style="height: 40px">
		<button class="btn btn-xm btn-info" onclick="addCart({{goods.gid}})">加入购物车</button>
		<button class="btn btn-xm btn-success" onclick="buy({{goods.gid}})">立即购买</button>
	</div>
</div>
{{/each}}
</script>
<script type="text/html" id="pageBtn">
	<!-- 分页操作按键 -->
	<button class="btn btn-xs btn-primary" onclick="getGoods({{gtid}},1)">首页</button>
	<button class="btn btn-xs btn-primary" onclick="getGoods({{gtid}},{{page==1?1:page-1}})">上一页</button>
	<button class="btn btn-xs btn-primary" onclick="getGoods({{gtid}},{{page==totalPage?totalPage:page+1}})">下一页</button>
	<button class="btn btn-xs btn-primary" onclick="getGoods({{gtid}},{{totalPage}})">末页</button>
	<br> <span>共{{totalPage}}页，现在是第{{page}}页。</span>
</script>
<script type="text/javascript">
	let nowPage;
	let nowGtid;

	//初始化页面，生成商品类别导航栏
	$(document).ready(function() {
		$.ajax({
			url : "goodsType",
			type : "post",
			data : {
				"opr" : "findAllValid"
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					//创建商品类别导航栏
					let goodsTypeNavHtml = template("goodsTypeNav", {
						goodsTypes : result.list
					});
					$("#goodsTypeList").html(goodsTypeNavHtml);

					//为导航栏添加事件
					$(".gtnav").click(function(e) {
						let gtid = $(e.currentTarget).attr("gtid");
						let gtname = $(e.currentTarget).text();
						$("#goodsTypeName").text(gtname);
						if (gtid == 0) {
							location.href = "index.jsp";
						}
						getGoods(gtid, 1);
					})

					let gtid = getGtidFromHref();
					let gtname = $(".gtnav[gtid='" + gtid + "']").text();
					$("#goodsTypeName").text(gtname);
					getGoods(gtid, nowPage);
				} else {
					alert(result.msg);
				}
			}
		})
	})

	function getGoods(gtid, page) {
		if (gtid == nowGtid && page == nowPage) {
			return;
		} else {
			nowGtid = gtid;
			nowPage = page;
		}
		$("#goodsView").empty();
		$.ajax({
			url : "goods",
			type : "post",
			data : {
				"opr" : "listByTerms",
				"gtid" : gtid,
				"gstate" : 1,
				"pageSize" : 8,
				"page" : page
			},
			dataType : "JSON",
			success : function(result) {
				if (result.msg == "ok") {
					//创建商品预览图
					let goodsViewHtml = template("goodsViewDiv", {
						goodses : result.list
					});
					$("#goodsView").html(goodsViewHtml);

					// 通过模板生成分页按键表					
					let pageBtnHtml = template("pageBtn", {
						page : result.pageBean.page,
						totalPage : result.pageBean.totalPage,
						gtid : gtid,
					});
					$("#pageNav").html(pageBtnHtml);
				} else {
					alert(result.msg);
				}
			}
		})
	}

	function getGtidFromHref() {
		let path = location.href;
		let zz = /gtid=\d+/;
		let strs = path.match(zz);
		if (strs == null || strs.length == 0) {
			return 0;
		} else {
			let gtid = path.match(zz)[0].substr('5');
			if (gtid != "") {
				return gtid;
			} else {
				return 0;
			}
		}

	}
</script>
</html>